<template>
	<view class="wrap">

		<view class="basic" :style="{'background-color' : colors}">
			<view class="name">扫书宝典
				<view style="font-size: 28rpx;padding-top: 10rpx;">当前日期： {{$u.timeFormat(Date.now(), 'yyyy.mm.dd')}}
				</view>
			</view>

			<view class="desc">
				今天是陪伴你的<br />第 {{nowTime}} 天
			</view>
			<view class="info">
				<view class="left">
					收录扫书<br /> 共 {{basicInfo.bookCount ? basicInfo.bookCount : '0'}} 篇
				</view>
				<view class="right">
					扫书字数<br /> 共 {{basicInfo.bookWord ? (basicInfo.bookWord / 10000).toFixed(2) : '0'}} 万
				</view>
			</view>
			<view class="tips">
				本 app 由 hcy 制作，丫丫书屋@小天sk 数据收集整理
			</view>
		</view>
		<!-- 软件声明 -->
		<view class="report">
			<view class="report_item" :style="{'background-color' : colors}" v-for="item in StatementList"
				:key="item._id" @click="showStatement(item)">{{item.name}}</view>
		</view>
		<!-- 近期发布 -->
		<view class="timePublish" v-if="jqPShow">
			<view class="title" :style="{'background-color' : colors}">近期发布</view>
			<view class="content" v-for="(item,index) in timePublish" :key="item._id" @click="toBookDetail(item._id)">
				<view class="left">
					<text style="color:#FA7298; padding: 0 20rpx;">NO{{index+1}}</text>
					<text class="bookname">{{item.bookname}}</text>
				</view>
				<view class="right">
					<text> {{$u.timeFormat(item.createTime, 'yyyy年mm月dd日 hh:MM')}}</text>
				</view>
			</view>
			<view class="title" :style="{'background-color' : colors}">查看更多</view>
		</view>
		<!-- 名词解释 -->
		<view class="terminology" v-if="tlyShow">
			<view class="title" :style="{'background-color' : colors}">名词解释</view>
			<view class="nounList">
				<view class="item" v-for="item in TerminologyList" :key="item._id" @click="showTerminology(item)">
					{{item.noun}}
				</view>
			</view>
		</view>

		<view class="bookWeb" v-if="webShow">
			<view class="title" :style="{'background-color' : colors}">常用站点</view>
			<view class="item" v-for="item in bookWebList" :key="item._id" @longpress="copyBookWebText(item.url)"
				@click="toBookWeb(item.url)">
				<view class="left">
					<u-icon name="ie" size="30"></u-icon>
					<text style="padding-left: 20rpx;">{{item.webName}}</text>
				</view>
				<text class="right">{{item.desc}}</text>
			</view>
			<view class="title" :style="{'background-color' : colors}">个人小程序不支持内部打开</view>
		</view>
		<view class="moreOpt" :style="{'background-color' : colors}" v-if="wxShow">
			<view class="iconfont icon-tianjia-" @click="showActionSheet = true">
			</view>
		</view>
		<u-modal v-model="showModel" :title-style="{color: '#ffffff' , fontWeight: 'bold;'  ,backgroundColor: colors}"
			:confirm-style="{borderTop:'1rpx solid #ccc'}" confirm-text="关闭" mask-close-able
			@confirm="showModel = false" :title="showTitle" :confirm-color="colors">
			<view class="slot-content">
				<!-- <rich-text :nodes="showContent"></rich-text> -->
				<text user-select decode>{{showContent}}</text>
			</view>
		</u-modal>
		<u-action-sheet :list="moreList" v-model="showActionSheet" @click="btnShowActionSheet" :cancel-btn="false">
		</u-action-sheet>
		<u-popup v-model="showColors" mode="center" width="500rpx">
			<view v-for="(item,index) in themeColors" :key="index"
				:style="{backgroundColor:item.c,color:'#ffffff',height:'80rpx',padding:'20rpx',textAlign:'center'}"
				@click="selectColor(item.c)">
				{{item.name}}
			</view>
		</u-popup>
	</view>
</template>

<script>
	import * as cloudApi from '@/utils/cloudApi.js'
	export default {
		data() {
			return {
				colors: '',
				userInfo: {},
				token: null,
				wxShow: true,
				tlyShow: true,
				webShow: true,
				jqPShow: true,
				timePublish: [],
				bookWebList: [],
				TerminologyList: [],
				nowTime: null,
				BookList: [],
				StatementList: [],
				basicInfo: {},
				showModel: false,
				showTitle: '',
				showContent: null,
				showActionSheet: false,
				moreList: [{
					text: '发布扫书',
					url: '/subpages/publishBook/index'
				}, {
					text: '搜索扫书',
					url: '/subpages/seach/index'
				}, {
					text: '主题颜色'
				}, {
					text: '扫书排行榜',
					url: '/subpages/bookRankList/index'
				}, {
					text: '反馈扫书及BUG',
					url: '/subpages/feedBack_Problems/index'
				}],
				showColors: false,
				themeColors: [{
					name: '歪吧黄',
					c: '#F3C301'
				}, {
					name: '少女粉',
					c: '#FA7298'
				}, {
					name: '基佬紫',
					c: '#9C28B1'
				}, {
					name: '天空蓝',
					c: '#2196F3'
				}, {
					name: '姨妈红',
					c: '#E5353F'
				}, {
					name: '息壤蓝',
					c: '#2965AE'
				}, {
					name: '多看橙',
					c: '#ED9030'
				}],
			}
		},
		computed: {

		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.colors
			})
		},
		onShow() {
			this.userInfo = uni.getStorageSync("userInfo") || getApp().globalData.userInfo
			this.token = uni.getStorageSync("token") || getApp().globalData.token
			this.colors = this.userInfo.themeColors || '#F3C301'
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.colors
			})

			cloudApi.call({ // 管理审核
				name: 'admin',
				data: {
					api: 'show'
				},
				success: (res) => {
					this.wxShow = res.result.data[0].show
					this.tlyShow = res.result.data[1].show
					this.webShow = res.result.data[2].show
					this.jqPShow = res.result.data[3].show
					console.log(res.result.data);
				}
			})
		},
		onLoad() {

			this.userInfo = uni.getStorageSync("userInfo") || getApp().globalData.userInfo
			this.token = uni.getStorageSync("token") || getApp().globalData.token
			this.colors = this.userInfo.themeColors || '#F3C301'
			this.getBasicInfo()
			this.getTimePublish()
			this.getStatement()
			this.getTerminology()
			this.getBookWeb()
			this.nowTime = this.$u.timeFormat(Date.now(), 'mmdd') - this.$u.timeFormat(this.userInfo.createTime, 'mmdd')
		},
		methods: {
			toBookDetail(id) {
				uni.navigateTo({
					url: '/subpages/bookRankList/detail?_id=' + id
				})
			},
			btnShowActionSheet(index) {
				if (!this.userInfo.openid) return this.$showToast('请先登录', 'none')
				// console.log(`点击了第${index + 1}项，内容为：${this.moreList[index].text}`)
				console.log(index, this.moreList[index].url);
				if (index == '2') {
					return this.showColors = true
				}
				uni.navigateTo({
					url: this.moreList[index].url
				})
			},
			selectColor(c) {
				console.log(c);
				this.showColors = false
				cloudApi.call({
					name: 'updateUserInfo',
					data: {
						api: 'updateColor',
						token: this.token,
						color: c
					},
					success: res => {
						console.log(res);
						cloudApi.getUserInfo()
						setTimeout(() => {
							this.$showToast('更换成功,下次进入更改', 'none')
						}, 1500)
					}
				})
			},
			showStatement(item) {
				this.showTitle = item.name
				this.showContent = item.content
				this.showModel = true
			},
			showTerminology(item) {
				this.showTitle = item.noun
				this.showContent = item.explain
				this.showModel = true
			},
			getTimePublish() {
				cloudApi.call({
					name: 'book',
					data: {
						api: 'getTimePublish'
					},
					success: res => {
						console.log(res, 'publish');

						this.timePublish = res.result.data
					}
				})
			},
			getBasicInfo() {
				cloudApi.call({
					name: 'book',
					data: {
						api: 'getBasicInfo'
					},
					success: res => {
						console.log(res);
						this.basicInfo = res.result.data[0]
					}
				})
			},
			getStatement() { // 获取声明
				cloudApi.call({
					name: 'book',
					data: {
						api: 'getStatement'
					},
					success: res => {
						this.StatementList = res.result.data
					}
				})
			},
			getBookList() {
				cloudApi.call({
					name: 'book',
					data: {
						api: 'getBookList'
					},
					success: res => {
						this.BookList = res.result.data
					}
				})
			},
			getTerminology() { // 获取名词解释
				cloudApi.call({
					name: 'book',
					data: {
						api: 'getTerminology'
					},
					success: res => {
						console.log(res);
						this.TerminologyList = res.result.data
					}
				})
			},
			getBookWeb() {
				cloudApi.call({
					name: 'book',
					data: {
						api: 'getBookWeb'
					},
					success: res => {
						console.log(res);
						this.bookWebList = res.result.data
					}
				})
			},
			copyBookWebText(e) {
				uni.setClipboardData({
					data: e,
					success(res) {}
				})
				// #ifdef APP-PLUS
				plus.runtime.openURL(e, function(res) {
					console.log(res);
				});
				// #endif

			},
			toBookWeb(url) { // 内部小程序打开外链
				uni.navigateTo({
					url: '/subpages/web/index?url=' + url
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.slot-content {
		font-size: 26rpx;
		color: $u-content-color;
		padding: 30rpx;
	}

	.wrap {
		margin: 20rpx;

		.basic {
			// background-color: $uni-color-primary;
			color: #ffffff;
			padding: 60rpx 40rpx;
			border-radius: 20rpx;
			box-shadow: 10rpx 10rpx 10px #ccc;
			text-align: center;
			margin-bottom: 30rpx;

			.name {
				font-weight: bold;
				font-size: 58rpx;
				padding-bottom: 80rpx;
			}

			.desc {
				line-height: 50rpx;
				padding-bottom: 80rpx;
			}

			.info {
				display: flex;
				justify-content: space-around;
				line-height: 50rpx;
				padding-bottom: 80rpx;
			}

			.tips {}
		}

		.report {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;

			&_item {
				// background-color: #F3C301;
				padding: 50rpx 95rpx;
				color: #ffffff;
				font-size: 38rpx;
				font-weight: bold;
				border-radius: 20rpx;
				box-shadow: 10rpx 10rpx 10px #ccc;
			}
		}

		.timePublish {
			margin-bottom: 20rpx;

			.title {
				// background-color: #F3C301;
				padding: 15rpx 0;
				color: #ffffff;
				text-align: center;
				font-size: 35rpx;
				font-weight: bold;
			}

			.content {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				padding: 30rpx 0;

				.left {
					max-width: 350rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;

				}

				.right {
					color: #ccc;
					font-size: 20rpx;
				}
			}
		}

		.terminology {
			margin-bottom: 20rpx;

			.title {
				// background-color: #F3C301;
				padding: 15rpx 0;
				color: #ffffff;
				text-align: center;
				font-size: 35rpx;
				font-weight: bold;
			}

			.nounList {
				display: flex;
				width: 100%;
				flex-wrap: wrap;
				// margin: 20rpx;

				.item {
					padding: 10rpx;
					background-color: #FFFCF3;
					border-radius: 15rpx;
					width: 33%;
					text-align: center;
					margin: 20rpx;
					max-width: 140rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				// .item:nth-child(3) {
				//     margin-right: 0;
				// }
			}
		}

		.bookWeb {
			.title {
				// background-color: #F3C301;
				padding: 15rpx 0;
				color: #ffffff;
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
			}

			.item {
				padding: 20rpx 40rpx;
				display: flex;
				justify-content: space-between;
				margin: 20rpx 0;
				background-color: #FFFCF3;
				border-radius: 30rpx;
			}
		}

		.moreOpt {
			position: fixed;
			bottom: 5vh;
			right: 5vh;
			width: 100rpx;
			height: 100rpx;
			border-radius: 20%;
			line-height: 100rpx;

			.iconfont {
				font-size: 50rpx;
				color: #fff;
				text-align: center;
			}
		}
	}
</style>
